<template>
	<div class="app-container">
		<el-form :model="form" :rules="rules" ref="queryRef" :inline="true" label-width="106px">
			<div class="bgWhite radius8">
				<div class=" fb fs16 border-bottom pl30 line-64">
					套餐详情
				</div>
				<div class="p20">
					<div class="fb mb20 pl10">
						基础信息
					</div>
					<el-form-item label="套餐名称：" prop="packageName">
						<div  style="width: 380px;">
							{{form.packageName}}
						</div>
					</el-form-item>
					<el-form-item label="销售渠道：" prop="salesChannel">
						<div style="width: 250px;">
							<dict-tag :options="bus_channel" :value="form.salesChannel" />
						</div>
					</el-form-item>
					<el-form-item label="整体数量：" prop="total">
						<div class="item-width">
							{{form.total}}套
						</div>
					</el-form-item>
				</div>
				<div class="p20">
					<div class="fb mb20 pl10 flex col-center row-between">
						关联商品
					</div>
					<el-table :data="selectList" style="width: 100%;"
						:header-row-style="{background:'#FAFAFA',color:'#0C1019',height:'54px'}"
						:cell-style="{height:'54px'}">
						<el-table-column label="商品名称" align="center">
							<template #default="scope">
								{{scope.row.commodityName}}
							</template>
						</el-table-column>
						<el-table-column label="商品编码" align="center">
							<template #default="scope">
								{{scope.row.commodityNumber}}
							</template>
						</el-table-column>
						<el-table-column label="商品规格" align="center">
							<template #default="scope">
								<dict-tag :options="bus_product_specification_unit"
									:value="scope.row.specificationId" />
							</template>
						</el-table-column>
						<el-table-column label="数量" align="center">
							<template #default="scope">
								{{scope.row.quantity}}
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="pl20 pr20 mt30 pb30" v-if="form.salesChannel[0] == '1001' || form.salesChannel == '1001'">
					<div class=" mb20 pl10 flex col-center row-between">
						<span class="fb">线上渠道价格</span>
						<div class="fs16 color2">
							<span class="mr10">拆箱套餐价格：{{boxPrice}}元/套</span>
							<span>整件套餐价格：{{wholePrice}}元/件</span>
						</div>
					</div>
					<el-table :data="form.commodityList" style="width: 100%;"
						:header-row-style="{background:'#FAFAFA',color:'#0C1019',height:'54px'}"
						:cell-style="{height:'54px'}">
						<el-table-column label="商品名称" align="center" width="250px">
							<template #default="scope">
								{{scope.row.commodityName}}
							</template>
						</el-table-column>
						<el-table-column label="商品编码" align="center" width="250px">
							<template #default="scope">
								{{scope.row.commodityNumber}}
							</template>
						</el-table-column>
						<el-table-column label="商品规格" align="center" width="250px">
							<template #default="scope">
								<dict-tag :options="bus_product_specification_unit"
									:value="scope.row.commoditySpecification" />
							</template>
						</el-table-column>
						<el-table-column label="数量" align="center" prop="quantity" />
						<el-table-column label="拆箱价格（元/最小单位）" align="center" prop="onlineIndividualPrice" />
						<el-table-column label="整件价格（元/最小单位）" prop="onlineWholePrice" align="center" />
					</el-table>
				</div>
				<div class="p20 " v-if="form.salesChannel[1] == '1002' ||  form.salesChannel == '1002'">
					<div class="fb mb20 pl10 flex col-center row-between">
						线下渠道价格
					</div>
					<el-table :data="form.offlinePriceList" style="width: 100%;"
						:header-row-style="{background:'#FAFAFA',color:'#0C1019',height:'54px'}"
						:cell-style="{height:'54px'}">
						<el-table-column label="价格规则" align="center">
							<template #default="scope">
								价格规则{{scope.$index+1}}
							</template>
						</el-table-column>
						<el-table-column :label="'商品'+(j+1)+'出厂价'" align="center" v-for="(item,j) in selectList"
							:key="j">
							<template #default="scope">
								{{item.outPrice}}
							</template>
						</el-table-column>
						<el-table-column label="套餐价格" align="center">
							<template #default="scope">
								{{scope.row.packagePrice}}
							</template>
						</el-table-column>
						<el-table-column label="应用范围" align="center" width="550px">
							<template #default="scope">
								<div class="flex col-center" style="width: 550px;">
									此规则应用范围：
									<div v-if="scope.$index == 0">
										此规则应用范围：全部部门（特殊部门除外）
									</div>
									<el-tree-select v-else disabled size="large" v-model="scope.row.departmentIds1"
										:data="deptOptions" :multiple="true" :props="{
									   value: 'deptId',
									   label: 'deptName',
									   children: 'children',
									}" placeholder="请选择" value-key="deptId" show-checkbox style="width: 400px;" />
								</div>
							</template>
						</el-table-column>

					</el-table>
					
				</div>
				<br>
				<el-form-item label="备注信息：" prop="remark" label-width="106">
					<div style="width: 575px;line-height: 25px;padding-top: 3px;">
						{{form.remark}}
					</div>
				</el-form-item>
			</div>
		</el-form>
	</div>
</template>
<script setup name="addCustomer">
	const {
		proxy
	} = getCurrentInstance();
	const {
		bus_product_type, //产品类型
		bus_product_category, //产品类别
		bus_toxicity, //毒性
		bus_sosage_form, //剂型
		bus_control_object, //防治对象
		bus_application_mode, //施用方式
		bus_target, //靶标
		bus_channel, //渠道
		bus_active_ingredient_content, //单位
		bus_product_specification_unit //规格
	} =
	proxy.useDict(
		"bus_product_type",
		"bus_product_category",
		"bus_toxicity",
		"bus_sosage_form",
		"bus_control_object",
		"bus_application_mode",
		"bus_target",
		"bus_channel",
		"bus_active_ingredient_content",
		"bus_product_specification_unit");
</script>
<script>
	import {
		listGoods, //商品列表
		addPackage, //添加套餐
		getGoodsGroup, //查询商品组
		editPackage, //编辑套餐
		getPackage, //套餐详情
	} from "@/api/business/product";
	import {
		listDept, //査部门
	} from "@/api/system/dept";
	import {
		getCustomerDetail
	} from "@/api/business/customer";
	import {
		getDivisions
	} from "@/api/business/opportunity";
	import {
		getOpportunityInfo,
		listOpportunity,
		teamAllocation,
		teamReceive,
		getUserListData
	} from "@/api/business/teamOpportunity";
	import {
		resetForm,
	} from '@/utils/ruoyi'
	export default {
		data() {
			return {
				ids: [],
				form: {
					id: '',
					packageName: '', //套餐名称
					packagePrice: '', //套餐价格
					productCategory: '', //商品种类
					salesChannel: '1001', //销售渠道
					total: '', //整件数量
					remark: '', //备注
					commodityList: [
						// {
						// 	id:'',
						// 	delFlag:'',//删除标识
						// 	packageId:'',//套餐id
						// 	packageNumber:'',//套餐编号
						// 	commodityId:'',//商品id
						// 	commodityNumber:'',//商品编号
						// 	commodityName:'',//商品名称
						// 	commoditySpecification:'',//商品规格
						// 	quantity:'',//数量
						// 	onlineIndividualPrice:'',//线上拆箱价格
						// 	onlineWholePrice:'',//线上整件价格
						// 	offlinePriceJson:'',//线下商品价格数据，因价格和商品都是动态
						// 	remark:'',//备注
						// }
					],
					offlinePriceList: [{
						id: '',
						delFlag: '', //删除标识
						packageId: '', //套餐id
						commodityId: '', //商品id
						priceName: '', //价格名称
						price: '', //套餐价格
						priceArr: [],
						packagePrice: '', //套餐价格
						departmentIds: [], //应用范围部门逗号，0全部
						departmentIds1: [], //应用范围部门逗号，0全部
						closeRemark: '', //结束订单备注
					}],
				},
				rules: {
					packageName: [{
						required: true,
						message: '请输入套餐名称',
						trigger: 'blur'
					}],
					salesChannel: [{
						required: true,
						message: '请选择销售渠道',
						trigger: 'change'
					}],
					total: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					quantity1: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}, ],
					quantity: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}, ],
					onlineIndividualPrice: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}, ],
					onlineWholePrice: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}, ],
				},
				list: [],
				loading: false,
				teamOptions: '', //业务经理
				cropNameArr: [], //作物名称
				productList: [], //产品名称
				options: [],
				value: [],
				loading1: false,
				selectList: [], //选中的商品
				wholePrice: 0, //整件价格
				boxPrice: 0, //拆箱价格
				deptOptions: [], //部门
			}
		},
		created() {
			this.getUserList()
			this.form.id = this.$route.query.id ? this.$route.query.id : ''
			this.getDetail()
		},
		methods: {
			getGoodsGroupList(ids) {
				console.log(ids, 'ids=')
				getGoodsGroup(ids).then((response) => {
					this.selectList = response.data
					if (this.selectList.length > 0 && this.form.id == '') {
						let arr = []
						for (let i in this.selectList) {
							let item = {
								id: '',
								delFlag: '', //删除标识
								packageId: '', //套餐id
								packageNumber: '', //套餐编号
								commodityId: '', //商品id
								commodityNumber: '', //商品编号
								commodityName: '', //商品名称
								commoditySpecification: '', //商品规格
								quantity: '', //数量
								onlineIndividualPrice: '', //线上拆箱价格
								onlineWholePrice: '', //线上整件价格
								offlinePriceJson: '', //线下商品价格数据，因价格和商品都是动态
								remark: '', //备注
							}
							arr.push(item)
							this.form.commodityList = arr
							for (let key in this.form.commodityList) {
								this.form.commodityList[key].commodityId = this.selectList[key].id //商品id
								this.form.commodityList[key].commodityName = this.selectList[key].commodityName
								this.form.commodityList[key].commodityNumber = this.selectList[key].commodityNumber
								this.form.commodityList[key].commoditySpecification = this.selectList[key]
									.specificationId //规格
								this.form.commodityList[key].offlinePriceJson = JSON.stringify(this.selectList[key]
									.offlinePrices) //规格
							}
						}
					} else {
						this.changPrice1()
						for (let i in this.form.commodityList) {
							this.selectList[i].quantity = this.form.commodityList[i].quantity
						}
						let arr = this.form.offlinePriceList[0].price.split(',')
						for (let i in arr) {
							this.selectList[i].outPrice = arr[i]
						}

					}
				})
			},
			//获取部门
			getUserList() {
				listDept().then((response) => {
					this.deptOptions = this.handleTree(response.data, "deptId");
					console.log(this.deptOptions, 'this.deptOptions')
				});
			},
			//数量联动
			quantityChange(value, index) {
				this.selectList[index].quantity = value
				this.form.commodityList[index].quantity = value
			},
			// 动态价格计算
			changPrice1() {
				let boxPrice = 0
				let wholePrice = 0
				for (let key in this.form.commodityList) {
					boxPrice += this.form.commodityList[key].onlineIndividualPrice * 1
				}
				this.boxPrice = boxPrice
				for (let key in this.form.commodityList) {
					wholePrice += this.form.commodityList[key].onlineWholePrice * 1
				}
				this.wholePrice = wholePrice
			},
			listGoods() {
				listGoods().then(res => {
					this.options = res.rows
					this.getDetail()
				})
			},
			// 详情
			getDetail() {
				getPackage(this.form.id).then(res => {
					this.form = res.data
					let arr = []
					for (let key in this.form.offlinePriceList) {
						this.form.offlinePriceList[key].departmentIds1 = this.form.offlinePriceList[key].departmentIds.split(',')
							
					}
					for (let key in this.form.commodityList) {
						arr.push(this.form.commodityList[key].commodityId)
					}
					this.form.salesChannel = this.form.salesChannel.split(',')
					this.getGoodsGroupList(arr.join(','))
				})
			},
		}
	}
</script>

<style>
	.item-width {
		width: 248px;
	}

	.el-form-item--default .el-form-item__label {
		color: #8c939d;
		font-weight: normal;
	}

	.avatar-uploader .el-upload {
		background: #F7F8FA;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
		width: 110px;
		height: 110px;
		text-align: center;
		line-height: 22px;
		color: #8c939d;
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}

	.shopImg {
		width: 110px;
		height: 110px;
	}
</style>